<template>
	<view class="d-category-container">
	  <view v-for="(section, sectionIndex) in sections" :key="sectionIndex"
			:class="section.containerClass">
		<view :class="section.gridClass">
		  <view v-for="(item, index) in section.items" :key="index"
				class="animate-item"
				:class="section.itemClass"
				:style="{ 
				  animationDelay: (index * 0.1 + sectionIndex) + 's',
				  '--rotate': getRandomRotate() + 'deg'
				}"
				@tap="onCategoryClick(item, getItemIndex(index, sectionIndex), section.clickType)">
			<image class="tilted"
				   :class="[section.iconClass, {'swing-enable': sectionIndex === 0 && item.shouldSwing}]"
				   :src="item.icon_new"
				   mode="aspectFit" />
			<text :class="section.nameClass">{{ item.class_name }}</text>
		  </view>

		  <!-- 更多按钮 -->
		  <!-- <view v-if="section.showMore"
				class="animate-item new-year-gengduo-nav-item"
				:style="{ 
				  animationDelay: '1.5s',
				  '--rotate': getRandomRotate() + 'deg'
				}"
				@tap="onCategoryClick(categories[0], -1, '更多')">
			<image class="tilted new-year-gengduo-nav-icon"
				   src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735202901676d1855a2ccb.png"
				   mode="aspectFit" />
			<text class="new-year-gengduo-nav-name">更多</text>
		  </view> -->
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	name: 'define_new_year',
  
	props: {
	  categories: {
		type: Array,
		default: () => []
	  },
	  navItems: {
		type: Array,
		default: () => []
	  }
	},
  
	computed: {
	  sections() {
		return [
		  {
			items: this.categories.map((item, index) => ({
				...item,
				shouldSwing: index < 10
			})),
			clickType: '2',
			containerClass: '',
			gridClass: 'd-category-grid',
			itemClass: 'd-category-item',
			iconClass: 'd-category-icon',
			nameClass: 'd-category-name',
			showMore: false
		  },
		  {
			items: this.navItems,
			clickType: '2',
			containerClass: 'new-year-gengduo-nav-container',
			gridClass: 'new-year-gengduo-nav-grid',
			itemClass: 'new-year-gengduo-nav-item',
			iconClass: 'new-year-gengduo-nav-icon',
			nameClass: 'new-year-gengduo-nav-name',
			showMore: true
		  }
		]
	  }
	},
  
	methods: {
	  getRandomRotate() {
		return Math.random() * 0 - 0;
	  },
  
	  getItemIndex(index, sectionIndex) {
		// If it's the first section, return the index as is
		if (sectionIndex === 0) {
		  return index;
		}
		// If it's the second section, add the length of categories
		return index + this.categories.length;
	  },
  
	  onCategoryClick(item, indexOf, indexStatus) {
		this.$emit('category-click', { item, indexOf, indexStatus });
	  }
	}
  }
  </script>
  
  <style lang="scss" scoped>
  .d-category-container {
	padding: 0 20rpx;
	background-color: #eee;
  }
  
  .d-category-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20rpx;
	padding: 16rpx;
	border-radius: 16rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
  }
  
  .d-category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
  }
  
  .d-category-icon {
	width: 120rpx;
	height: 152rpx;
	margin-bottom: 10rpx;
  }
  
  .d-category-name {
	font-size: 24rpx;
	color: #333333;
	text-align: center;
	font-weight: 600;
  }
  
  .new-year-gengduo-nav-container {
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
  }
  
  .new-year-gengduo-nav-grid {
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
	overflow-y: hidden;
    gap: 30rpx;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  
  .new-year-gengduo-nav-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .new-year-gengduo-nav-icon {
	width: 96rpx;
	height: 152rpx;
	margin-bottom: 10rpx;
  }
  
  .new-year-gengduo-nav-name {
	font-size: 20rpx;
	color: #333333;
	text-align: center;
	width: 120rpx;
	height: 32rpx;
	line-height: 32rpx;
	font-weight: 600;
  }
  
  .animate-item {
	opacity: 0;
	animation: fadeInUp 0.5s ease forwards;
  }
  
  @keyframes fadeInUp {
	from {
	  opacity: 0;
	  transform: translateY(30rpx);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
  .tilted {
	transform: rotate(var(--rotate)) scale(0.95);

	&:hover {
	  transform: rotate(var(--rotate)) scale(1);
	}
  }

  .swing-enable {
	animation: swing 3s ease-in-out infinite;
  }


//   这里晃动的幅度
  @keyframes swing {
	0%, 100% {
	  transform: rotate(calc(var(--rotate) - 8deg)) scale(0.95);
	}
	50% {
	  transform: rotate(calc(var(--rotate) + 8deg)) scale(0.95);
	}
  }

  .d-category-icon,
  .new-year-gengduo-nav-icon {
	width: 120rpx;
	height: 152rpx;
	margin-bottom: 10rpx;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

	&:active {
	  transform: rotate(var(--rotate)) scale(1.15);
	  animation: none; // 点击时停止晃动
	}
  }
  </style>